{{include template('public/header','admin')}}
<script src="/static/plugins/jquery/jquery.form.js"></script>
<style>
    .imagelist {
        margin-top: 1px;
    }
    .imagelist ul {
        background: #fff;
    }
    .imagelist ul li {
        float: left;
        width: 25%;
        text-align: center;
        margin: 10px 0;
        position: relative;
    }
    .imagelist ul li a {
        width: 100px;
        height: 70px;
        border: 1px solid #eee;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
        position: relative;
    }
    .imagelist ul li a img {
        width: 90px;
        height: 60px;
        position: absolute;
        right: 5px;
        bottom: 5px;
        z-index: 9;
    }
    .imagelist ul li a .checkd {
        width: 25px;
        height: 25px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 10;
    }
    .hidden {
        display: none!important;
        visibility: hidden!important;
    }
</style>
</head>
<body>
    <div class="container">
        <div style="margin: 20px;">
            <form id="jvForm" name="jvForm" method="post" action="/attachment/api/upload" enctype="multipart/form-data"  class="form-inline" role="form">
                <input type='hidden' name='type' value="{{$t}}" />
                <input type='hidden' name='module' value="{{$module}}" />
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#base" data-toggle="tab">上传文件</a></li>
                    <li><a href="#link" data-toggle="tab">站内文件</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="base"><br>
                        <table class="table table-border">
                            <tr>
                                <td class="w_100">可上传类型: </td>
                                <td>{{$type}}</td>
                            </tr>
                            <tr>
                                <td class="w_100">单文件最大: </td>
                                <td><span class="red">{{$upload_maxsize}}</span>数量: <span class="red">{{$n}}</span>个</span></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <input type="file" name="filename" id="filename" onchange="uploadPic()" multiple="true" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div id="uploadlist" class="imagelist">
                                        <ul></ul>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="link"><br>
                        <div class="imagelist">
                            <ul>
                                {{foreach $items as $item}}
                                {{$item.imgfile}}
                                {{/foreach}}
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="bottom_button">
                    <input type="button" class="btn btn-primary radius" id="determine" value="&nbsp;&nbsp;确定&nbsp;&nbsp;">
                    <input type="button" class="btn btn-default radius" id="cancel" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
                </div>
            </form>
        </div>
        <div id="att_status" class="hidden"></div>
    </div>
    <script>
        $(function () {
            var module = "{{$module}}";
            var t = "{{$t}}";
            var n = "{{$n}}";
            var index = parent.layer.getFrameIndex(window.name);
            $('#determine').on('click', function () {
                var att_status = $("#att_status").html();
                if (att_status == '') {
                    layer.alert('你还没选择附件呢？');
                    return false;
                }
                att_status = att_status.substr(1);
                if (t == '1') {
                    if (!isimg(att_status)) {
                        layer.alert("选择的类型必须为图片类型!");
                        return false;
                    }
                }
                if (n == "1") {
                    debug("pid:{{$pid}}=" + att_status)
                    parent.$("#{{$pid}}").val(att_status);
                    parent.$("#{{$pid}}_src").attr("src", att_status);
                } else {
                    var string = '';
                    var strs = new Array();
                    strs = att_status.split("|");
                    for (i = 0; i < strs.length; i++) {
                        string += '<li>文件：<input type="text" name="{{$pid}}[url][]" value="' + strs[i] + '" id="{{$pid}}_' + i + '" onMouseOver="layer_img_preview(\'{{$pid}}_' + i + '\', this.value)"  onmouseout="layer.closeAll();" class="input-text w_300"> 描述：<input type="text" name="{{$pid}}[alt][]" value="" ><a href="javascript:;" onclick="remove_li(this);">删除</a></li>';
                    }
                    parent.$("#{{$pid}}").append(string);
                }
                parent.layer.close(index);
            });
            $('#cancel').on('click', function () {
                parent.layer.close(index);
            });
        });
        function uploadPic() {
            // 上传设置
            var options = {
                url: "/attachment/api/upload",
                type: "post",
                dataType: "json",
                success: function (data, status, xhr) {
                    if (data.status == 1) {
                        var att_url = data.filetype == 'jpg' || data.filetype == 'png' || data.filetype == 'gif' || data.filetype == 'jpeg' ? data.msg :
                                (data.filetype == 'zip' || data.filetype == 'rar' ? '/static/common/img/ext/rar.png' : '/static/common/img/ext/blank.png');
                        var li = '<li><a href="javascript:;" class="on" onclick="javascript:album_cancel(this)"><img src="' + att_url + '" title="' + data.title + '"/>\n\
                        <img src="/static/common/img/checked.gif" class="checkd"></a></li>';
                        $("#uploadlist ul").prepend(li);
                        $('#att_status').append('|' + data.msg);
                    } else {
                        layer.alert(data.msg);
                    }
                }
            };
            $("#jvForm").ajaxSubmit(options);

        }
        function isimg(url) {
            var sTemp;
            var b = false;
            var opt = "jpg|gif|png|jpeg";
            var s = opt.toUpperCase().split("|");
            for (var i = 0; i < s.length; i++) {
                sTemp = url.substr(url.length - s[i].length - 1);
                sTemp = sTemp.toUpperCase();
                s[i] = "." + s[i];
                if (s[i] == sTemp) {
                    b = true;
                    break;
                }
            }
            return b;
        }
        function album_cancel(obj) {
            var path = $(obj).children(".img_src").attr("path");
            if ($(obj).hasClass('on')) {
                $(obj).removeClass("on");
                $(obj).children(".checkd").addClass("hidden");
                var imgstr = $("#att_status").html();
                var length = $("a[class='on']").children(".img_src").length;
                var strs = '';
                for (var i = 0; i < length; i++) {
                    strs += '|' + $("a[class='on']").children(".img_src").eq(i).attr('path');
                }
                $('#att_status').html(strs);

            } else {
                var num = $('#att_status').html().split('|').length;
                var file_upload_limit = '{{$n}}';
                if (num > file_upload_limit) {
                    layer.alert('不能选择超过' + file_upload_limit + '个附件');
                    return false;
                }
                $(obj).addClass("on");
                $(obj).children(".checkd").removeClass("hidden");
                $('#att_status').append('|' + path);
            }
        }
    </script>
</body>
</html>
